<template>
	<button @click="chooseAddress">选择地址</button>
	<map class="map-view" @callouttap="goDetail" @markertap="goDetail" :longitude="longitude" :latitude="latitude" :markers="markers"></map>
</template>

<script setup>
import { ref } from 'vue'

	const longitude = ref()
	const latitude = ref()
	const markers = ref([])
	// 获取当前位置经纬度，在地图上面标注当前位置
	const getCurPos = () => {
		uni.getLocation({
			success(res) {
				console.log(res)
				longitude.value = res.longitude;
				latitude.value = res.latitude;
				markers.value = [{
					id: 0,
					latitude: res.latitude,
					longitude: res.longitude
				}]
				getHouse()
			}
		})
	}
	const getHouse = () => {
		uniCloud.callFunction({
			name: 'getHouse',
			data: {
				pageNum: 1,
				pageSize: 1000,
			},
			success(res) {
				console.log(res)
				res.result.data.forEach(item => {
					if(item.id) {
						markers.value.push({
							id: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							// iconPath: '/static/icon/circle.png',
							width: 0,
							height: 0,
							callout:{
								content: item.title + item.unitPrice + '/㎡',
								textAlign: 'center',
								color: '#000',
								display: 'ALWAYS',
								bgColor: '#FC3',
								borderColor: "#FFFFCC",
								borderWidth: 2,
								padding: 10,
								borderRadius: 30,
								anchorY: 10
							}
						})
					}
				})
			}
		})
	}
	getCurPos()
	const goDetail = e => {
		uni.navigateTo({
			url: '/pages/detail/detail?id=' + e.detail.markerId
		})
		console.log(e.detail.markerId)
	}
	// 选择位置，查询附近房源
	const chooseAddress = () => {
		console.log('chooseAddress')
		uni.chooseLocation({
			success(res) {
				console.log(res)
				latitude.value = res.latitude
				longitude.value = res.longitude
				markers.value = [
					{
						id: 0,
						latitude: res.latitude,
						longitude: res.longitude
					}
				]
				getHouse()
			}
		})
	}
</script>

<style lang="scss" scoped>
	.map-view{
		height: 100vh;
		width: 100vw;
	}
</style>
